<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="editDialogVisible"
    width="623px"
    class="add-event-dialog"
    @close="shutdown"
  >
    <div slot="title" class="tac drawerHeader">
      <span> {{title}}组件</span>
    </div>
  
    <div class="dialog-content-box">
      <el-table
      v-if="isTableShow"
        :header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
        ref="multipleTable"
        :data="BomTableData"
        height="100%"
        tooltip-effect="dark"
      >
        <el-table-column prop="unit" label="类别">
          <template slot-scope="scope">
          <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="设为默认">
          <template slot-scope="scope">
          <el-switch @change="switchChange(scope,scope.row[editRow.isDefault])"  v-model="scope.row[editRow.isDefault]"></el-switch>
          </template>
    
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <!-- <i class="el-icon-top" id="iconStyle"></i>
           <i class="el-icon-bottom"  id="iconStyle"></i> -->
            <i class="el-icon-delete" id="iconStyle" @click="handleDelete(scope)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
      <div slot="footer" class="drawerFooter">
        <el-button
          @click="handleAdd()"
          style="margin-left: 16px; color: #fff; background-color: #ee790c"
          >新增</el-button
        >
        <el-button @click="shutdown">取消</el-button
        ><el-button
          type="primary"
          @click="handleConfirmSave()"
          style="margin-left: 16px; color: #fff; background-color: #2a78fb"
          >确定</el-button
        >
      </div>
    
  </el-dialog>
</template>

<script>


export default {
  props: {
    title:{
      type:String,
    },
    editRow: {
      type: Object,
      default: () => {
        return {
          isDefault:'isDefault'
        };
      },
    },
    workList:{
      type:Array,
    }
  },
  data() {
    return {
      editDialogVisible: false,
      isTableShow:true,
      BomTableData: [1],
      work: 1,
      flag: "add",
      Tabs: "msg",
    };
  },
  watch: {
    editDialogVisible(newVal){
      if(newVal){
       this.BomTableData=  JSON.parse(
        JSON.stringify(this.workList))
      }
    },
    workList(){
      this.BomTableData=JSON.parse(
        JSON.stringify(this.workList))
    }  
  },
  mounted() {
  },
  methods: {
    handleAdd() {
      this.BomTableData.push({name:'',[this.editRow.isDefault]:false,sort:this.BomTableData.length});
    },
    handleDelete(scope) {
      this.BomTableData.splice(scope.$index,1)
      // this.BomTableData=this.BomTableData.filter(i=>{
      //   return i.id!=id
      // })

    },
    switchChange(scope,val){
      let arr=[]
      for(let i in this.BomTableData){
        if(this.BomTableData[i][this.editRow.isDefault]){
          arr.push(i)
        }
      }
      if(arr.length>1){
        this.$message({
          message: '只能设一个为默认',
          type: "warning",
        });
        scope.row[this.editRow.isDefault]=!val
      }
    },
    handleConfirmSave() {
      let arr=[]
      for(let i in this.BomTableData){
        if(this.BomTableData[i][this.editRow.isDefault]){
          arr.push(i)
        }
      }
      if(arr.length>1){
        this.$message({
          message: '只能设一个为默认',
          type: "warning",
        });
      }else{ 
        this.$emit('handleConfirmSave',this.BomTableData)
      }
    },
   
    shutdown() {
      this.editDialogVisible = false;
      
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-content-box {
  height:400px;
  .form-item {
    width: 65%;
  }
  .form-item2 {
    width: calc(50% - 5px);
    float:left;
   
  }
}
  #iconStyle {
    font-size: 20px !important;
  }
 

::v-deep .el-form {
  width: 389px;
  .input-box .input-content input {
    margin: 0;
    margin-right: 3px;
  }
  .el-input__inner,
  .el-textarea__inner {
    line-height: 18px;
    font-family: PingFangSC;
  }
}
::v-deep .el-tabs__header {
  border: none;
  .el-tabs__nav {
    border: none;
   
  }
}
::v-deep .el-form-item__content {
  width: 263px;
  .input-box {
    width: 263px;
  }
}
::v-deep .el-form-item__label {
  font-size: 13px !important;
  color: #000;
  font-family: PingFangSC;
  text-align: center !important;
  width: 60px;
}
::v-deep .input-box .input-content input {
  width: 23px;
  height: 26px;
  border-color: rgba(0, 0, 0, 0.1);
  font-family: PingFangSC;
}
::v-deep .el-icon-minus {
  width: 13px !important;
  height: 26px !important;
  line-height: 38px !important;
  color: #e5e5e5;
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px !important;
  color: rgba(0, 0, 0, 0.9);
}
::v-deep .el-input__inner::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
::v-deep .el-form-item__error {
  font-family: PingFangSC;
}
.self {
  ::v-deep .el-input__inner {
  }
}
::v-deep .el-select-dropdown {
  position: absolute !important;
  top: 36px !important;
  left: 0px !important;
}
::v-deep .el-select-dropdown__wrap {
  overflow: auto !important;
}
</style>
